import { Input, View, Image } from "@tarojs/components";
import { useEffect, useState } from "react";
import ico_sear from "@/assets/image/ico_sear.svg";
import "./index.scss";
import clsx from "clsx";

const Search = (props) => {
  const {
    className,
    onInput,
    onClick,
    onFocus,
    value,
    onBlur,
    onConfirm,
    placeholder = "",
    password = false,
    left,
    showSearch = true,
    disabled = false,
    right,
    maxlength = 100,
  } = props;
  const [currentValue, setCurrentValue] = useState(value);
  useEffect(() => {
    setCurrentValue(value);
  }, [value]);
  const [focus, setFocus] = useState(false);

  return (
    <View
      onClick={() => {
        onClick?.();
      }}
      className={clsx(
        "q-input-container dis-flex align-center pl-24 border-box",
        focus ? "focus" : "blur",
        className
      )}
    >
      {left}
      {showSearch && <Image className="search-icon" src={ico_sear} />}
      <Input
        disabled={disabled}
        value={currentValue}
        className="q-input ml-20"
        password={password}
        maxlength={maxlength}
        onFocus={() => {
          setFocus(true);
          if (onFocus) {
            onFocus();
          }
        }}
        onBlur={() => {
          setFocus(false);
          if (onBlur) {
            onBlur();
          }
        }}
        onInput={(e) => {
          if (onInput) {
            onInput(e.detail.value);
          }
          setCurrentValue(e.detail.value);
        }}
        onConfirm={onConfirm}
        placeholder={placeholder}
        placeholderClass="cl-content"
      />
      {right}
    </View>
  );
};
export default Search;
